<template>
  <el-input
    ref="compRef"
    v-model="value"
    v-bind="{ ...$props }"
    @blur="onBlur"
    class="customer-input"
  >
    <template v-for="(_slot, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" :key="slotName" v-bind="slotProps"></slot>
    </template>
  </el-input>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { InputProps, ElInput } from "element-plus";
import { ElInputExpose } from "./types";
interface Props extends Partial<InputProps> {}
withDefaults(defineProps<Props>(), {
  type: "text",
  showWordLimit: false,
  clearable: false,
  showPassword: false,
  disabled: false,
  rows: 2,
  autosize: false,
  autocomplete: "off",
  readonly: false,
  autofocus: false,
  validateEvent: true,
});

const value = defineModel({ type: String });
const compRef = ref();

function onBlur() {
  value.value = value.value?.trim();
}

defineExpose<ElInputExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss">
.el-input {
  --el-font-size-base: 12px;
  height: 30px;
  &.el-input--large {
    --el-font-size-base: 14px;
  }
}

// 这里统一按照UI修改基础组件的样式
.el-input__wrapper.is-focus {
  // 去掉focus效果
  // --el-input-focus-border-color: var(--el-input-border-color);
}
</style>
